<!DOCTYPE html>
<html lang="en">
<head>
  <title>colResizable demo</title>  

  <link rel="stylesheet" type="text/css" href="css/main.css" />  
  <style>
      .scroll{
          overflow:scroll;
          max-width:100%;
          position:relative;
      }

      
  </style>
  <script  src="js/jquery.js"></script>
  <script  src="../../colResizable-1.6.js"></script>
  <script type="text/javascript">
	$(function(){	

	
		$("#normal").colResizable({
			liveDrag:true, 
			gripInnerHtml:"<div class='grip'></div>", 
			draggingClass:"dragging", 
            resizeMode:'fit'
        });
        
        $("#flex").colResizable({
            liveDrag:true, 
            gripInnerHtml:"<div class='grip'></div>", 
            draggingClass:"dragging", 
            resizeMode:'flex'
        });


      $("#overflow").colResizable({
          liveDrag:true, 
          gripInnerHtml:"<div class='grip'></div>", 
          draggingClass:"dragging", 
          resizeMode:'overflow'
      });
        

      $("#disabled").colResizable({
          liveDrag:true, 
          gripInnerHtml:"<div class='grip'></div>", 
          draggingClass:"dragging", 
          resizeMode:'overflow',
          disabledColumns: [2]
      });

        
    });	
  </script>
  
</head>
<body>
	<div class="center" >
	
        <h3>Try to resize your browser to understand what is going on in this sample</h3>
        <br/>
    
        <p><strong>resizeMode: 'fit'</strong> table width adapts to the container width. Columns resize using their neighbour's width</p>
		 <table id="normal" width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<th>header</th><th>header</th><th>header</th>
			</tr>
			<tr>
				<td class="left">cell</td><td>cell</td><td class="right">cell</td>
			</tr>
			<tr>
				<td class="left">cell</td><td>cell</td><td class="right">cell</td>
			</tr>
			<tr>
				<td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
			</tr>																	
		</table>

        
        <p><strong>resizeMode: 'flex'</strong> columns are sized independently unless there is not enought space in the container</p>
        <table id="flex" width="50%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <th>header</th><th>header</th><th>header</th>
            </tr>
            <tr>
                <td class="left">cell</td><td>cell</td><td class="right">cell</td>
            </tr>
            <tr>
                <td class="left">cell</td><td>cell</td><td class="right">cell</td>
            </tr>
            <tr>
                <td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
            </tr>																	
        </table>
 
        
        <p><strong>resizeMode: 'overflow'</strong> columns are sized independently. Table width can exceed its container </p>
        <div class="scroll">
            <table id="overflow" width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <th>header</th><th>header</th><th>header</th>
                </tr>
                <tr>
                    <td class="left">cell</td><td>cell</td><td class="right">cell</td>
                </tr>
                <tr>
                    <td class="left">cell</td><td>cell</td><td class="right">cell</td>
                </tr>
                <tr>
                    <td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
                </tr>																	
            </table>
        </div>
        
        <p><strong>disabled columns:</strong> it can be specified whether some columns will not have resizing grip</p>
        <table id="disabled" width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <th>header</th><th>header</th><th class="disabled">disabled</th>
            </tr>
            <tr>
                <td class="left">cell</td><td>cell</td><td class="right disabled">disabled</td>
            </tr>
            <tr>
                <td class="left">cell</td><td>cell</td><td class="right disabled">disabled</td>
            </tr>
            <tr>
                <td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right disabled">disabled</td>
            </tr>																	
        </table>
		<br/>


	</div>	
		

	
		
 </body>
 </html>
